<template>
    <div class="collChart" @contextmenu.prevent="showMenu1($event)">
        <vue-context-menu
            :contextMenuData="contextMenuData"
            @downloadData="downloadData"
            @setMarkPoint="setMarkPoint"
            @clearPoint="clearPoint"
            @setSecondLine="setSecondLine"
            @clearLine="clearLine"
            @setFreDouCount="setFreDouCount"
            @freDoubling="freDoubling"
            @sideFre="sideFre"
            @setCharFre="setCharFre"
            @downtestfile="downtestfile"
            @setThr="setThr"
            @aa="aa"
        />
        <el-collapse @change="handleCollChange" v-model="activeCollapse">
            <el-collapse-item v-for="item in menulist" :title="item.title" :name="item.ref" ref="collapseItem">
                <div class="coll" :style="`height:${collHeight}`">
                    <hight-charts :box="box" @setTime="setTime" :type="item.ref" :ref="item.ref" :sensorInfo="sensorInfo" @getFilter="getFilter" />
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import hightCharts from './hightCharts'

import { contextMenuData, menuList } from '../config'

export default {
    data() {
        return {
            activeCollapse: [],
            collHeight: null,
            contextMenuData,
            activeRef: null,
            box: 'coll',
        }
    },
    props: {
        sensorInfo: {
            type: Object,
            default: null,
        },
        menulist: {
            type: Array,
            default: [],
        },
    },
    watch: {
        menulist: {
            handler(newArr, oldArr) {

                this.setHeight()
            },
            deep: true, // 监听数组内部变化
        },
    },
    components: {
        hightCharts,
    },
    methods: {
        getFilter(e) {

            this.$emit('getFilter', e)
        },
        handleCollChange(e) {
            this.$nextTick(() => {
                let len = e.length
                let lin = 36 * this.menulist.length
                window.requestAnimationFrame(() => {
                    this.collHeight = len === 0 ? '' : `calc((100vh - 117px - ${lin}px) / ${len})`

                })
            })
        },
        aa() {},
        draw(options, ref) {
            setTimeout(() => {
                this.$nextTick(() => this.$refs[ref][0].updateChart(options))
            }, 500)
        },
        showMenu1(e) {
            let x = e.clientX
            let y = e.clientY
            const collapseItems = this.$refs.collapseItem
            let selectedItem = null
            collapseItems.forEach((item) => {
                this.$refs[item.name][0].closeMenu()
                const rect = item.$el.getBoundingClientRect()
                if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
                    selectedItem = item
                }
            })
            if (selectedItem) {
                let { name } = selectedItem


                this.activeRef = name
                this.$refs[this.activeRef][0].showMenu(e)
            }
        },
        setMarkPoint() {


        },
        downloadData() {

            this.$refs[this.activeRef][0].downloadData()
        },
        clearChart(ref) {
            this.$refs[ref][0].clearChart()
        },
        setTime(item) {
            this.$emit('setTime', item)
        },
        startLoading(ref) {
            if (this.$refs[ref]) this.$refs[ref][0].startLoading()
        },
        setHeight() {
            let lin = 36 * this.menulist.length
            let hen = `calc((100vh - 117px - ${lin}px) / ${this.menulist.length})`

            this.$set(this, 'collHeight', hen)
            this.$set(
                this,
                'activeCollapse',
                this.menulist.map((e) => e.ref),
            )
        },
    },
    created() {
        this.setHeight()
        this.contextMenuData.menulists = [
            // {
            //     fnHandler: 'setMarkPoint',
            //     btnName: '标记',
            // },
            // {
            //     fnHandler: 'clearPoint',
            //     btnName: '清除标记',
            // },
            {
                fnHandler: 'downloadData',
                btnName: '导出数据',
            },
            // {
            //     fnHandler: 'setSecondLine',
            //     btnName: '双游标',
            // },
            // {
            //     fnHandler: 'clearLine',
            //     btnName: '清除标记',
            // },
            // {
            //     fnHandler: 'downtestfile',
            //     btnName: '算法测试文件',
            // },
            // {
            //     fnHandler: 'downloadData',
            //     btnName: '导出数据',
            // },
            // {
            //     fnHandler: 'setFreDouCount',
            //     btnName: '频带数量',
            // },
            // {
            //     fnHandler: 'freDoubling',
            //     btnName: '倍频',
            // },
            // {
            //     fnHandler: 'sideFre',
            //     btnName: '边频',
            // },
            // {
            //     fnHandler: 'setCharFre',
            //     btnName: '特征频率',
            // },
            // {
            //     fnHandler: 'clearLine',
            //     btnName: '清除标记',
            // },
            // {
            //     fnHandler: 'setThr',
            //     btnName: '设置阈值',
            // },
        ]
    },
}
</script>

<style lang="less" scoped>
.collChart {
    width: 100%;
    height: 100%;
    position: relative;
    .box {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
}
</style>
